<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>postJob</title>
    <!--引入bootstrap和jQuery以及该html对应的css和js文件-->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <script src="../js/postJob.js" ></script>
    <script src="/ckeditor/ckeditor.js"></script>
    <link href="../css/postJob.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        #editor1{
            transition: .6s ease;
        }
    </style>
</head>
<body style="padding-top: 210px">
<!--导航栏-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="z-index: 99999">
    <div class="container" >
        <!--注册和登录按钮-->
        <ul class="nav navbar-nav navbar-right " id="logAcount" >
            <li><a href="/html/signIn.html"><span class="glyphicon glyphicon-user"></span> REGISTER</a></li>
            <li><a href="/html/login.html"><span class="glyphicon glyphicon-log-in"></span> SIGN IN</a></li>
        </ul>
        <!---->
        <!--当页面宽度变小后，导航栏收拢变成三条小杠，点击可以打开导航栏-->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/html/home.html"><img src="../img/coding.png" alt="" style="width: 210px; height: 40px;margin-top: -9px"></a>
        </div>
        <!---->
        <!--导航栏上的选项-->
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">
                <li ><a href="/html/home.html">ALL JOBS</a></li>
                <li><a href="/html/postJob.html">POST A JOB</a></li>
                <li><a href="/html/myPost.html">MY POST</a></li>
                <li><a href="/html/accountDetail.html">ACCOUNT</a></li>
            </ul>
        </div>
        <!---->
    </div>
</nav>
<!---->
<nav class="navbar  navbar-fixed-top" role="navigation" style="margin-top: 20px!important;z-index: 99998">
    <div class="container" style="width: 100%;height: 50px"></div>
    <div  style="width: 100%;height: 160px;background-color: #209b60;margin-top: -20px ;padding: 40px">
        <div class="container">
            <div class="col-sm-6" >
                <h1 style="color: white">POST</h1>
            </div>

            <div class="col-sm-6 text-right"  >
                <ol class="breadcrumb" >
                    <li>
                        <a href="/html/home.html" >Home</a>
                    </li>
                    <li style="color: white">post a job</li>
                </ol>
            </div>
        </div>
    </div>
</nav>
<p id="test" type="text" style="text-align: center;width:100%; position: absolute ;"></p>
<!---->
<!--<form id="form1">-->
<!--<input type="text" name="editTitle" id="postTitle">postTitle<br>-->
<!--<input type="text" name="editCompany" id="postCompany">postCompany<br>-->
<!--<input type="text" name="editDescription" id="postDescription">postDescription<br>-->
<!--<input type="text" name="editApply" id="postApply">postApply<br>-->
<!--<input type="text" name="editDate" id="postDate">postDate<br>-->
<!--<input type="text" name="editCategory" id="postCategory">postCategory<br>-->
<!--<input type="text" name="editType" id="postType">postType<br>-->
<!--<input type="text" name="editTags" id="postTags">postTags<br>-->
<!--<input type="text" name="editCity" id="postCity">postCity<br>-->
<!--<input type="text" name="editCountry" id="postCountry">postCountry<br>-->
<!--<button type="submit" id="postAddPosition">submit</button>-->
<!--</form>-->
<div class="container" id="content" >
    <form id="form1">

        <div class="accountInfo" id="positionMaster">
            <div class="row">
                <div class="col-sm-6" >
                    <!--title输入框-->
                    <div class="input-group input-login detailE" style="margin: 100px auto 0 auto">
                        <input type="text" class="form-control input-login" name="editTitle" id="postTitle" placeholder="Title" >
                        <span class="input-group-addon input-group-addon-icon"  >
                <span class="glyphicon glyphicon-bookmark glyphicon-icon" ></span></span>
                    </div>
                    <!---->
                </div>
                <div class="col-sm-6" >
                    <!--country-->
                    <div class="input-group input-login detailE" style="margin: 100px auto 0 auto">
                        <input type="text" class="form-control input-login " name="editCountry" id="postCountry" placeholder="Country">
                        <span class="input-group-addon input-group-addon-icon">
                <span class="glyphicon glyphicon-home glyphicon-icon"></span></span>
                    </div>
                    <!---->
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6" >
                    <!--category输入框-->
                    <div class="input-group input-login detailE" style="margin: 50px auto 0 auto">
                        <input type="text" class="form-control input-login " name="editCategory" id="postCategory" placeholder="Category">
                        <span class="input-group-addon input-group-addon-icon">
                <span class="glyphicon glyphicon-list glyphicon-icon"></span></span>
                    </div>
                    <!---->

                </div>
                <div class="col-sm-6" >
                    <!--city-->
                    <div class="input-group input-login detailE" style="margin: 50px auto 0 auto">
                        <input type="text" class="form-control input-login " name="editCity" id="postCity" placeholder="City">
                        <span class="input-group-addon input-group-addon-icon">
                <span class="glyphicon glyphicon-home glyphicon-icon"></span></span>
                    </div>
                    <!---->

                </div>
            </div>
            <div class="row">
                <div class="col-sm-6" >
                    <!--type输入框-->
                    <div class="input-group input-login detailE" style="margin: 50px auto 0 auto">
                        <input type="text" class="form-control input-login " name="editType" id="postType" placeholder="Job Type">
                        <span class="input-group-addon input-group-addon-icon">
                <span class="glyphicon glyphicon-list glyphicon-icon"></span></span>
                    </div>
                    <!---->

                </div>
                <div class="col-sm-6" >
                    <!--公司名称输入框-->
                    <div class="input-group input-login detailE" style="margin: 50px auto 0 auto">
                        <input type="text" class="form-control input-login " name="editCompany" id="postCompany" placeholder="Company">
                        <span class="input-group-addon input-group-addon-icon">
                <span class="glyphicon glyphicon-home glyphicon-icon"></span></span>
                    </div>
                    <!---->

                </div>
            </div>


            <div class="row">
                <div class="col-sm-6" >
                    <!--tags-->
                    <div class="input-group input-login detailE" style="margin: 50px auto 0 auto">
                        <input type="text" class="form-control input-login " name="editTags" id="postTags" placeholder="Tags">
                        <span class="input-group-addon input-group-addon-icon">
                <span class="glyphicon glyphicon-tags glyphicon-icon"></span></span>
                    </div>
                    <!---->

                </div>
                <div class="col-sm-6" >

                    <!--apply输入框-->
                    <div class="input-group input-login detailE" style="margin: 50px auto 0 auto">
                        <input type="text" class="form-control input-login " name="editApply" id="postApply" placeholder="Apply">
                        <span class="input-group-addon input-group-addon-icon">
                <span class="glyphicon glyphicon-phone-alt glyphicon-icon"></span></span>
                    </div>
                    <!---->
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6" >
                    <!--description输入框-->
                    <div class="input-group input-login detailE" style="margin: 50px auto 0 auto" >
                        <input type="text" class="form-control input-login " placeholder="Description" style="display: none;">
                        <div id="editor1" contenteditable="true" style="width:100%;height: 50px; z-index:999; border: 1px solid #ccc; border-radius: .2em;overflow: hidden;padding: 12px 40px 10px 12px;"></div>
                        <span class="input-group-addon input-group-addon-icon ">
                        <span class="glyphicon glyphicon-book glyphicon-icon" id="book1"></span></span>
                    </div>
                    <!---->

                </div>
                <div class="col-sm-6" >
                    <!--date输入框-->
                    <div class="input-group input-login detailE" style="margin: 50px auto 0 auto">
                        <input type="text" class="form-control input-login " name="editDate" id="postDate" placeholder="Date">
                        <span class="input-group-addon input-group-addon-icon">
                <span class="glyphicon glyphicon-calendar glyphicon-icon"></span></span>
                    </div>
                    <!---->
                </div>
            </div>
            <!--更改按钮和注销按钮-->
            <div class="bs-example" id="butt" style="width: 500px; margin: 50px auto 0 auto">
                <button type="submit" class="btn btn-primary" id="postAddPosition" style="width: 500px;height: 50px" id="modify">CREATE ITEM</button>
            </div>
            <!---->
        </div>
    </form>
</div>
</body>
<!--页脚-->
<div id="footer">
    <div class="row">
        <div class="col-xs-6 col-sm-3 col" id="col1">
            <div id="rc1">
                <h1 class="h">COURSES</h1>
                <p class="p1"><span class="glyphicon glyphicon-play"></span>
                    <a href="http://www.codingirls.club/how_club_works#" class="a1">Web Development</a></p>
                <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
                <p class="p1"><span class="glyphicon glyphicon-play"></span>
                    <a href="http://www.codingirls.club/how_club_works#" class="a1">Ruby Path</a></p>
                <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
                <p class="p1"><span class="glyphicon glyphicon-play"></span>
                    <a href="http://www.codingirls.club/how_club_works#" class="a1">Node Path</a></p>
                <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
                <p class="p1"><span class="glyphicon glyphicon-play"></span>
                    <a href="http://www.codingirls.club/how_club_works#" class="a1">Mobile Path</a></p>
                <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
                <p class="p1"><span class="glyphicon glyphicon-play"></span>
                    <a href="http://www.codingirls.club/how_club_works#" class="a1">Career Development</a></p>

            </div>
        </div>
        <div class="col-xs-6 col-sm-3 col" id="col2">
            <div id="rc2">
                <h1 class="h">QUICK LINKS</h1>
                <p class="p1"><span class="glyphicon glyphicon-play"></span>
                    <a href="http://www.codingirls.club/how_club_works#" class="a1">Web Development</a></p>
                <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
                <p class="p1"><span class="glyphicon glyphicon-play"></span>
                    <a href="http://www.codingirls.club/how_club_works#" class="a1">Ruby Path</a></p>
                <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
                <p class="p1"><span class="glyphicon glyphicon-play"></span>
                    <a href="http://www.codingirls.club/how_club_works#" class="a1">Node Path</a></p>
                <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
                <p class="p1"><span class="glyphicon glyphicon-play"></span>
                    <a href="http://www.codingirls.club/how_club_works#" class="a1">Mobile Path</a></p>
                <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
                <p class="p1"><span class="glyphicon glyphicon-play"></span>
                    <a href="http://www.codingirls.club/how_club_works#" class="a1">Career Development</a></p>

            </div>
        </div>
        <!-- Optional: clear the XS cols if their content doesn't match in height -->
        <div class="clearfix visible-xs-block"></div>
        <div class="col-xs-6 col-sm-3 col" id="col3">
            <h1>RECENT POST</h1>
            <p><img src="../img/footer.png" height="30" width="70"/>
                <a href="http://www.codingirls.club/how_club_works#"  class="a1">Post title goes here</a></p>
            <p>2 days ago</p>
            <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
            <p><img src="../img/footer.png" height="30" width="70"/>
                <a href="http://www.codingirls.club/how_club_works#"  class="a1">Post title goes here</a></p>
            <p>2 days ago</p>
            <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
            <p><img src="../img/footer.png" height="30" width="70"/>
                <a href="http://www.codingirls.club/how_club_works#" class="a1">Post title goes here</a></p>
            <p>2 days ago</p>
        </div>
        <div class="col-xs-6 col-sm-3 col" id="col4">
            <h1>CONTACT US</h1>
            <p class="fa fa-wechat"></p>
            <p><span class="a2">微信客服：</span> <span class="a3">codingirls</span></p>
            <p class="a1">Monday - Friday - 9:Am to 5 Pm</p>
            <p class="a1">Questions: info@codingirls.club</p>
            <a href=""></a>
        </div>
    </div>
</div>
<div id="info">
    <div id="info1">© Coding Girls Club Copyright 2016 - 2017. All Right Reserved.</div>
</div>
<!---->
<script>
    window.onload = function () {
        var editor1 = document.getElementById("editor1");
        var book1 = document.getElementById("book1");
        editor1.onfocus = function () {
            editor1.style.height = "245px";
            book1.style.display = "none";
        };
        editor1.onblur = function () {
            editor1.style.height = "50px";
            book1.style.display = "inline-block";
        };
        let emailId=sessionStorage.getItem("emailId");
        if(sessionStorage.getItem("emailId")){
            $("#logAcount").empty();
            let str=`<li><a href="/html/accountDetail.html"><span class="glyphicon glyphicon-user"></span> ${emailId}</a></li>`;
            str+=`<li><a href="/html/home.html" onclick="sessionStorage.clear()"><span class="glyphicon glyphicon-log-out"></span> EXIT</a></li>`
            $("#logAcount").append(str);
        }else {
            $('#test').empty();
            $('#positionMaster').empty();
            let str = "<div class='alert alert-info alert-dismissible' role='alert' style='font-size: 20px'>"+
                "<button type='button' class='close' data-dismiss='alert' aria-label='Close'>"+
                "<span aria-hidden='true'>&times;</span>"+"</button>"+" ATTENTION&nbsp;!&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Please log in first;</div>";
            $('#test').append(str);

        }
        var form1 = document.getElementById("form1");
        form1.addEventListener("submit",function (event) {
            event.preventDefault();
            sendMessage();
        });
        function sendMessage() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if(xhr.readyState === 4){
                    if((xhr.status>=200&&xhr.status<300)||xhr===304){
                        var response = xhr.responseText;
                        var warn = response.slice(0,4);
                        var email = response.slice(4);
                        $('#test').empty();
                        let str = "<div class='alert alert-success alert-dismissible' role='alert'>"+
                            "<button type='button' class='close' data-dismiss='alert' aria-label='Close'>"+
                            "<span aria-hidden='true'>&times;</span>"+"</button>"+"SUCCESS&nbsp;!&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Create successfully</div>";
                        $('#test').append(str);
                        window.location.href=`workDetail.html?${email}`;
                    }
                    else {
                        alert("error");
                    }
                }
            };
            xhr.open("post",`/usrs/${emailId}/positions`,true);
            var formData = new FormData(form1);//不需要头部请求,但是要新建FormData对象

            var date = new Date();
            var publishArr = [];
            publishArr.push(date.getFullYear());
            publishArr.push(date.getMonth());
            publishArr.push(date.getDate());
            publishStr = publishArr .join(".");
            var invalidArr = publishArr;
            invalidArr[1]++;
            invalidStr = invalidArr.join(".");

            var data = CKEDITOR.instances.editor1.getData();
            formData.append("publishTime",publishStr);
            formData.append("invalidTime",invalidArr);
            formData.append("editDescription",data)

            xhr.send(formData);
        }
    }
</script>
<!--* title：**id=postTitle**（必填项）-->
<!--*  company：**id=postCompany**（必填项）-->
<!--* description：**id=postDescription**(必填项，支持简单的富文本)-->
<!--* how to apply：**id=postApply**（必填项）-->
<!--* expiry date：**id =postDate**(必填项，下拉框)-->
<!--* category：**id= postCategory**(必填项，下拉框)-->
<!--* job type：**id=postType**(必填项，下拉框)-->
<!--* tags：**id=postTags**(非必填)-->
<!--* city：**id=postCity**(必填项，输入框)-->
<!--* country：**id=postCountry**(必填项，下拉框，默认China)-->
<!--* **id=postAddPosition** (有一个创建工作的按钮)-->
</html>